<template>
    <div>
        <el-form :inline="true" :model="searchData" style="display: flex; align-items: center;"
            class="demo-form-inline">
            <el-form-item label="编号:">
                <el-input v-model="searchData.WarehouseCode" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="仓库名称:">
                <el-input v-model="searchData.Name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="仓库类型:">
                <el-select v-model="searchData.WarehouseType" clearable placeholder="请选择">
                    <el-option v-for="item in WarehouseManagermentList" :key="item.id" :label="item.warehouseType"
                        :value="item.warehouseType">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="GetWarehouseManagermentDtoAsync()">
                    <i class="el-icon-search">&nbsp;</i>查询
                </el-button>
                &nbsp;&nbsp;
                <el-button @click="reset()"><i class="el-icon-refresh"></i>&nbsp;重置</el-button>
                &nbsp;&nbsp;
                <el-button type="success" @click="add()"><i class="el-icon-plus"></i>&nbsp;添加</el-button>
                &nbsp;&nbsp;
                <el-button type="danger" @click="BatchDel()"><i class="el-icon-delete"></i>&nbsp;批量删除</el-button>
                &nbsp;&nbsp;
                <el-button type="success" plain @click="exportListToExcel(ids)"><i
                        class="el-icon-upload2"></i>&nbsp;导出</el-button>
            </el-form-item>
        </el-form>

        <p></p>

        <el-table :data="WarehouseManagermentList" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center">
            </el-table-column>
            <el-table-column prop="warehouseCode" label="仓库编号" align="center">
            </el-table-column>
            <el-table-column prop="name" label="仓库名称" align="center">
            </el-table-column>
            <el-table-column prop="lleaseTime" label="租赁时间" align="center">
                <template slot-scope="scope">
                    {{ scope.row.lleaseTime.substring(0, 10) }}
                </template>
            </el-table-column>
            <el-table-column prop="warehouseType" label="仓库类型" align="center">
            </el-table-column>
            <el-table-column prop="isDisable" label="是否禁用" align="center">

                <template slot-scope="scope">
                    <span v-if="scope.row.isDisable == true">启用</span>
                    <span v-if="scope.row.isDisable == false">禁用</span>
                </template>
            </el-table-column>
            <el-table-column prop="isDefault" label="是否默认" align="center">

                <template slot-scope="scope">
                    <span v-if="scope.row.isDefault == true">是</span>
                    <span v-if="scope.row.isDefault == false">否</span>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地址" align="center">
            </el-table-column>
            <el-table-column prop="area" label="面积" align="center">
            </el-table-column>
            <el-table-column prop="contacts" label="联系人" align="center">
            </el-table-column>
            <el-table-column prop="phone" label="电话" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">

                <template slot-scope="scope">
                    <el-link type="warning" @click="upd(scope.row.id)">编辑</el-link>
                    &nbsp;&nbsp;
                    <el-link type="danger" @click="del(scope.row.id)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>

        <el-form :inline="true" class="btu">
            <el-form-item>
                总共{{ page.totalCount }}条数据，每页显示{{ page.pageSize }}条数据，共{{ page.pageCount }}页，当前第{{ page.pageIndex }} /
                {{ page.pageCount }}页
            </el-form-item>
            <el-form-item>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page.pageIndex" :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize"
                    layout="sizes,slot, prev, pager, next" :total="page.totalCount" prev-text="上一页" next-text="下一页">
                    <button @click="handleCurrentChange(1)" :disabled="page.pageIndex == 1">首页</button>
                </el-pagination>
            </el-form-item>
            <el-form-item>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page.pageIndex" :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize"
                    layout="slot,jumper" :total="page.totalCount" prev-text="上一页" next-text="下一页">
                    <button @click="handleCurrentChange(page.pageCount)"
                        :disabled="page.pageIndex == page.pageCount">尾页</button>
                </el-pagination>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

import { GetWarehouseManagermentDtoAsync, DelWarehouseManagerment, BatchDelWarehouseManagerment } from "@/api/BasicsDatumServer/WarehouseManagerment";
import XLSX from 'xlsx';
// 引入signalr,注意，因版本原因项目中不引用这句话，否则报错
const signalR = require("@microsoft/signalr");
export default {
    //数据
    data() {
        return {
            //查询条件
            searchData: {
                WarehouseCode: "",
                Name: "",
                WarehouseType: ""
            },
            //仓库列表
            WarehouseManagermentList: [],
            //分页
            page: {
                pageIndex: 1,
                pageSize: 5,
                pageCount: 0,
                totalCount: 0
            },
            //选中的复选框
            ids: [],

            connection: null,
            msgs: [],
            dataInfo: "",
        }
    },
    //计算属性
    computed: {
        sid() {
            var sid = [];
            this.ids.forEach((item) => {
                sid.push(item.id);
            })
            return sid;
        },
    },
    //方法
    methods: {
        handleSelectionChange(val) {
            this.ids = val;
        },
        //仓库显示
        GetWarehouseManagermentDtoAsync() {
            let data = {
                warehouseCode: this.searchData.WarehouseCode,
                name: this.searchData.Name,
                warehouseType: this.searchData.WarehouseType,
                pageIndex: this.page.pageIndex,
                pageSize: this.page.pageSize,
            };

            GetWarehouseManagermentDtoAsync(data).then((res) => {
                this.WarehouseManagermentList = res.data.data.data;

                this.page.pageCount = res.data.pageCount;
                this.page.totalCount = res.data.totalCount;
            });
        },
        //重置
        reset() {
            //刷新页面
            location.reload();
        },
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.GetWarehouseManagermentDtoAsync();
        },
        handleCurrentChange(val) {
            this.page.pageIndex = val;
            this.GetWarehouseManagermentDtoAsync();
        },
        //跳转到添加页面
        add() {
            //跳转到添加页面
            this.$router.push({ path: "/BasicsDatumServer/WarehouseManagerment/WarehouseManagermentAdd" });
        },
        upd(id) {
            //跳转到修改页面
            this.$router.push("WarehouseManagermentUpd?id=" + id);
        },
        del(id) {
            this.$confirm('您确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.Del(id);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //删除仓库
        Del(id) {
            let data = {
                id: id
            };

            DelWarehouseManagerment(data).then(res => {
                if (res.data.totalCount > 0) {
                    this.$message.success('删除成功');
                    this.GetWarehouseManagermentDtoAsync();
                }
                else {
                    this.$message.error('删除失败');
                }
            })
        },
        //批量删除仓库
        BatchDel() {
            if (this.ids.length == 0) {
                this.$message({
                    message: '请至少选择一条要删除的数据！',
                    type: 'warning'
                });
                return
            }
            var data = {
                delId: this.sid.toString(),
            }
            //console.log(22222, data.delId);

            this.$confirm('此操作将永久批量删除该文件?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                BatchDelWarehouseManagerment(data).then((res) => {
                    if (res.data.totalCount > 0) {
                        this.$message({
                            message: "批量删除成功",
                            type: "success",
                        });
                        this.GetWarehouseManagermentDtoAsync();
                    } else {
                        this.$message({
                            message: "批量删除失败",
                            type: "error",
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消批量删除'
                });
            });
        },
        //导出
        exportListToExcel(ids) {
            //验证
            if (this.ids.length == 0) {
                this.$message({
                    message: '请至少选择一条要导出的数据！',
                    type: 'warning'
                });
                return
            }

            // 过滤需要导出的字段
            const aaa = ids.map(item => {
                return {
                    仓库编号: item.warehouseCode,
                    仓库名称: item.name,
                    仓库类型: item.warehouseType,
                    租赁时间: item.lleaseTime,
                    地址: item.address,
                    面积: item.area,
                    联系人: item.contacts,
                    电话: item.phone,
                };
            });
            const worksheet = XLSX.utils.json_to_sheet(aaa);
            //设置表格宽度
            worksheet['!cols'] = [
                { width: 10 },
                { width: 15 },
                { width: 15 },
                { width: 20 },
                { width: 15 },
                { width: 15 },
                { width: 10 },
                { width: 15 },
            ];

            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
            // 导出Excel文件
            XLSX.writeFile(workbook, '乔建伟的仓库管理.xlsx');
        },

        initsignalr() {
            // 建立连接
            this.connection = new signalR.HubConnectionBuilder()
                .withUrl("http://localhost:63626/chatHub")
                .withAutomaticReconnect()
                .build();

            // 注册方法
            this.connection.on("ShowMsg", this.ShowMsg);

            // 开始连接
            this.connection
                .start()
                .then(() => console.log("Connected!"))
                .catch((err) => {
                    console.log(err);
                });
        },

        ShowMsg(msgInfo) {
            console.log(11, msgInfo);
            this.msgs.push(msgInfo + "--" + (this.msgs.length + 1));
        },

        // 调用后端方法
        receiveMessage() {
            this.$store.state.snm++;
            let params = "Hello";
            this.connection
                .invoke("SendMessage", params)
                .then(() => console.log("send succeed!"));
        },
    },
    //勾子函数加载数据
    created() {
        this.GetWarehouseManagermentDtoAsync();
        this.receiveMessage();
    },
    mounted() {
        this.initsignalr();
    },
}
</script>

<style>
.btu {
    margin-top: 10px;
}
</style>